/*
 * @Author: 小胖沱 1643200914@qq.com
 * @Date: 2022-12-20 18:35:37
 * @LastEditors: 小胖沱 1643200914@qq.com
 * @LastEditTime: 2023-01-04 17:54:21
 * @FilePath: \jk_sort_front\src\pages\QueryReport\ProcessBroad\components\ProductionSum.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import './pSum.less'

import { Progress, Table } from 'antd'
import type { ColumnsType } from 'antd/lib/table'
import { useEffect, useRef, useState } from 'react'

import styles from './productionSum.module.less'

export default (props) => {
  const { data, moQty, isFull } = props
  const makerTable = useRef<any>()
  const containerRef = useRef<any>()

  const [makerColumns, setMakerColumns] = useState<any[]>([])
  const [makerData, setMakerData] = useState<any[]>([])
  const [scrollHeight, setScrollHeight] = useState<number>(0)

  // 制单表头
  useEffect(() => {
    const columns: ColumnsType<any[]> = [
      {
        title: '制单款号',
        dataIndex: 'styleCode',
        key: 'styleCode',
        align: 'center'
      },
      {
        title: '总数',
        dataIndex: 'amount',
        key: 'amount',
        align: 'center'
      },
      {
        title: '已完成',
        dataIndex: 'finishedAmount',
        key: 'finishedAmount',
        align: 'center'
      },
      {
        title: '未完成',
        dataIndex: 'unFinishedAmount',
        key: 'unFinishedAmount',
        align: 'center'
      },
      {
        title: '剩余库存',
        dataIndex: 'residueStockQty',
        key: 'residueStockQty',
        align: 'center'
      },
      {
        title: '进度',
        dataIndex: 'progress',
        key: 'progress',
        align: 'center',
        render: (_value, row: any) => {
          const { finishedAmount, amount } = row
          const pNumber = Math.round((finishedAmount / amount) * 100)
          const color = () => {
            if (pNumber <= 25) {
              return '#DD2A2A'
            }
            if (pNumber <= 50 && pNumber > 25) {
              return '#F7B500'
            }
            if (pNumber <= 75 && pNumber > 50) {
              return '#0EC5DF'
            }
            if (pNumber > 75) {
              return '#44D7B6'
            }
          }
          return (
            <div
              style={{
                display: 'flex',
                whiteSpace: 'nowrap',
                paddingRight: '16px'
              }}
            >
              <Progress
                strokeColor={color()}
                trailColor="#072C88"
                style={{ color: '#fff' }}
                percent={pNumber}
              />
            </div>
          )
        }
      }
    ]
    setMakerColumns(columns)
  }, [])

  // 制单表格数据
  useEffect(() => {
    if (data && data.length) {
      console.log(data, 'data--------')

      setMakerData(data)
    }
  }, [data])

  // 制单表格滚动
  useEffect(() => {
    if (makerTable && makerTable.current) {
      const target = makerTable.current.getElementsByClassName('ant-table-body')

      setInterval(() => {
        target[0].scrollTop += 1
        if (
          target[0].scrollTop >=
          target[0].scrollHeight - target[0].clientHeight
        ) {
          target[0].scrollTop = 0
        }
      }, 64)
    }
  }, [makerTable])

  useEffect(() => {
    setTimeout(() => {
      const t: any = document.getElementsByClassName('ant-table-thead')?.[0]
      t.style.boxSizing = 'border-box'
      const sHeight = makerTable.current.clientHeight - t.clientHeight
      setScrollHeight(sHeight - 20)
    }, 100)
  }, [])

  return (
    <div className={styles.container} id="pTable" ref={containerRef}>
      <header className={styles.sumHeader}>生产中制单数量：{moQty || 0}</header>
      <Table
        className={styles.sumTable}
        ref={makerTable}
        pagination={false}
        rowKey={'moId'}
        columns={makerColumns}
        dataSource={makerData}
        scroll={{ y: scrollHeight }}
      />
    </div>
  )
}
